<template>
  <el-descriptions
      column="1"
      border
      :size="'large'"
      style="width: 60%; margin: 0 auto"
  >
    <el-descriptions-item label="头像"><el-avatar :size="100" v-bind:src="pet.avatarUrl" style="margin-left: 250px" /></el-descriptions-item>
    <el-descriptions-item label="宠物ID">{{pet.id}}</el-descriptions-item>
    <el-descriptions-item label="名字">{{pet.name}}</el-descriptions-item>
    <el-descriptions-item label="公母">{{genderVal}}</el-descriptions-item>
    <el-descriptions-item label="品种">{{pet.variety}}</el-descriptions-item>
    <el-descriptions-item label="重量">{{pet.weight}} KG</el-descriptions-item>
    <el-descriptions-item label="Remarks">
      <el-tag size="small">pet</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="操作">
      <el-button type="primary" @click="visible.dialogVisible = true">更改信息</el-button>
      <el-button type="info" @click="visible.dialogVisibleDel = true">删除</el-button>
    </el-descriptions-item>
  </el-descriptions>


  <el-dialog
      v-model="visible.dialogVisible"
      title="编辑宠物信息"
      width="500">
    <el-upload ref="upload" class="avatar-uploader" :before-upload="beforeAvatarUpload" action="#"
               :http-request="uploadFile" :auto-upload="false" multiple list-type="picture-card" :file-list="fileList"
               :on-change="fileChange">
      <el-icon>
        <Plus />
      </el-icon>
      <template #file="{ file }">
        <img :src="file.url" alt="" />
      </template>

    </el-upload>
    <el-input title="2e13" v-model="pet.name" label="name"></el-input>
    <el-input v-model="pet.variety" label="variety"></el-input>
    <el-input v-model="pet.age" label="age"></el-input>
    <el-input v-model="pet.gender" label="gender"></el-input>
    <el-input v-model="pet.weight" label="weight"></el-input>
    <el-button type="primary" @click="handleUpdateAvatar">确定</el-button>
    <el-button @click="cancel">取消</el-button>
  </el-dialog>

  <el-dialog
      v-model="visible.dialogVisibleDel"
      width="500"
  >
    <span style="font-size: 22px">确定删除您的宠物 {{pet.name}}</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible.dialogVisibleDel = false">取消</el-button>
        <el-button type="danger" @click="deletePet">
          删除
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>

import axios from "axios";
import {ElMessage} from "element-plus";


export default {
  name: "PetCardDetail",
  data(){
    return{
      pet:{
        id: '1',
        name: '',
        age: '',
        gender: '',
        weight: '',
        variety: '',
        avatarUrl: '',
      },
      visible:{
        dialogVisible:false,
        dialogVisibleDel:false
      }
    }
  },
  mounted() {
    this.getPetInfo()
  },
  computed: {
    genderVal() {
      return this.gender === 1 ? '公' : '母';
    },
  },
  methods:{
    getPetInfo(){
      axios.get("http://localhost:8088/pet/one/"+this.$route.query.id,{withCredentials:true})
          .then(response => {
            this.pet = response.data
          })
    },
    // 自定义上传图片方法,参数必须为params
    uploadFile(params) {
      const file = params.file;
      var forms = new FormData();
      // 我这里需要将更新时间和uid同时传给后端，后端使用对象接收，所以没有设置content-type
      // 如果你只传file，要设置axios中headers的content-type为：multipart/form-data
      forms.append("file", file);
      forms.append("petId",this.pet.id);
      forms.append("name", this.pet.name);
      forms.append("gender", this.pet.gender);
      forms.append("age", this.pet.age);
      forms.append("variety", this.pet.variety);
      forms.append("weight", this.pet.weight);
      axios.post("http://localhost:8088/pet/update",forms,{withCredentials:true})
          .then(res => {
            console.log(res)
            this.getPetInfo();
          }).catch(err => {
        console.log("上传文件时发生错误: " + err);
      })
    },
    // 上传图片时检查
    beforeAvatarUpload(file) {
      //允许的图片类型
      const imgType = (file.type === 'image/jpeg') || (file.type === 'image/png') || (file.type === 'image/gif');
      //文件大小3M
      const imgLimit= (file.size / 1024 / 1024) < 3;
      if (!imgType) {
        this.$message.error("只允许jpg、png、gif格式的图片");
        return false;
      }
      if (!imgLimit) {
        this.$message.error("上传的图片大小不能超过3MB");
        return false;
      }
      console.log("检查通过");
      return true;
    },
    //文件改变时的钩子函数,只能上传一张，选中后会覆盖掉之前的图片，
    fileChange(file, fileList) {
      //this.file表示上一张被选中的图片，file.raw表示当前选中的图片
      this.file = file.raw;
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]];
      }
    },
    // 确认修改头像
    handleUpdateAvatar() {
      this.$refs['upload'].submit();
      this.visible.dialogVisible = false;
      this.$refs['upload'].clearFiles();
    },
    // 取消上传头像
    cancel() {
      this.visible.dialogVisible = false;
      this.$refs['upload'].clearFiles();
    },

    deletePet(){
      this.visible.dialogVisibleDel = false;
      axios.delete('http://localhost:8088/delete/pet/'+this.pet.id,{withCredentials:true})
          .then(res => {
            if (res.data.code == 200){
              ElMessage("删除成功")
              this.$router.push('/petPage')
            }
          })
    }
  }
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
 .avatar-uploader .el-upload {
   border: 1px dashed var(--el-border-color);
   border-radius: 6px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   transition: var(--el-transition-duration-fast);
 }

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>